<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link href="<s:url value="/css/style.css"/>" rel="stylesheet"
			type="text/css" />
		<link href="<s:url value="/js/simpletooltip.css"/>" rel="stylesheet"
			type="text/css" />
		<script type="text/javascript"
			src="<s:url value="/js/jquery-1.3.2.min.js"/>"></script>
		<script type="text/javascript"
			src="<s:url value="/js/jquery-ui-1.7.2.custom.min.js"/>"></script>
		<script type="text/javascript"
			src="<s:url value="/js/jquery.scrollfollow.js"/>"></script>
		<script type="text/javascript"
			src="<s:url value="/js/jquery.Hscrollfollow.js"/>"></script>
		<script type="text/javascript"
			src="<s:url value="/js/jquery-ui-Draggable.1.7.1.js"/>"></script>
		<script type="text/javascript"
			src="<s:url value="/js/jquery.blockUI.js"/>"></script>
		<script type="text/javascript">
     	var lasttdid="";
		function doSelect(divid,entityid,date,time,teacher) {
 		    if (lasttdid){
		       $("#"+lasttdid).css("font-weight","normal");
		    };
 		    if (entityid===-1){
		       $("#entityid").val("") ;
		       $("#divid").val("");
		       lasttdid="";
		       $("#seldate").val("") ;
		       $("#seltime").val("");
		       $("#selfocus").val("");
		       $("#selteacher").val("");
		    }else{
		       $("#entityid").val(entityid) ;
		       $("#divid").val(divid);
		       lasttdid=divid;
		       $("#seldate").val(date) ;
		       $("#seltime").val(time);
		       var f=$("#"+divid).html();
		       $("#selfocus").val(f);
		       $("#selteacher").val(teacher);
		       $("#"+divid).css("font-weight","bolder");
		    };
	    };
		function doDBSelect(divid,doAction,entityid,date,time,teacher) {
		    doSelect(divid,entityid,date,time,teacher);
		    if (doAction=='BOOKING'){
		       doBooking('NORMAL','0');
		    }else if (doAction=='CANCEL'){
		       doBooking('CANCEL','0');
		    }
	    };
	    var bookinging=false;
	    function doBooking(type,confirm)
         {    
             var order= $('#bookingOrder').attr('value');
             if (order){
                if ((order!=1)&&(order!=2)){
                   alert("please select 1 or 2 as order!");
                   return;
                }
             }
             if (!$('#entityid').attr('value')){
                alert("please select one class!");
                return;
             }  
             //alert(type);
             // $.blockUI({ css: { 
             //       border: 'none', 
             //       padding: '15px', 
              //      backgroundColor: '#000', 
             //       '-webkit-border-radius': '10px', 
             //       '-moz-border-radius': '10px', 
             //       opacity: .5, 
             //       color: '#fff' 
             //} });  
             if (bookinging){
                  alert("please booking for seconds!");
                  return;
             }
             var url = "<s:url value="/academic/ClassBooking/doBooking.action"/>";
             var params = {
                selClassEntityId:$('#entityid').attr('value'),
                selLeadsId:$('#leadsid').attr('value'),
                bookingComments:$('#bookingComments').attr('value'),
                bookingOrder:$('#bookingOrder').attr('value'),
                year:$('#selYear').attr('value'),
                week:$('#selWeek').attr('value'),
                type:type,
                confirm:confirm
             };
             jQuery.post(url, params, callbackFun);
             bookinging=true;
          };
 
         function callbackFun(data)
         {
               bookinging=false;
              //setTimeout($.unblockUI, 10); 
              $(data).find('response').each(function(){　　　　　　　　　　　　　　　　　　
　 　　　　　　　　  var type= $(this).children("type").text() ;
                  if (type==="ok"){
                      var info=$(this).children("info").text() ;
                      $("#info").val(info);
                      var td_obj = $("#"+lasttdid);  
                      td_obj.css("background-color",$(this).children("color").text() );
                      td_obj.attr("title", $(this).children("title").text() );
                      td_obj.html($(this).children("value").text());
                  }else if  (type==="warn"){
                       var msg=$(this).children("info").text();
                       $("#info").val(msg);
                        var type= $(this).children("dotype").text() ;
                        var confirmmsg= $(this).children("confirm").text() ;
                        if(confirm(msg)){
		                   doBooking(type,confirmmsg);
	                   }else{ 
	                       return;
 	                   }
                  }else if  (type==="error"){
                      $("#info").val($(this).children("info").text());
                      alert($(this).children("info").text());
                  }
  　　　　　　　 });
 　　　      };
 	    $( document ).ready( function ()
			{
			   $( '#topdiv' ).scrollFollow(
					{
						speed: 1,
						offset:0 
					}
				);
				$( '#leftdiv' ).HscrollFollow(
					{
						speed: 1,
						offset:0 
					}
				);
				$('#floatdiv').draggable();
 			}
		);
	   var showT=false;
	   function doShowTeacher(){
	       if (showT){
	          $("FONT[title='teacher']").css("color", "#A7CDF7");
	          showT=false;
	       }else{
	          $("FONT[title='teacher']").css("color", "black");
	          showT=true;
	       }
       };
       var showFloat=false;
	   function doShowFloat(){
	       if (showFloat){
	          $("#floatdiv").show();
	          showFloat=false;
	       }else{
	          $("#floatdiv").hide();
	          showFloat=true;
	       }
       };
       var showFloatTop=true;
	   function doShowFloatTop(){
	       if (showFloatTop){
	          $("#floatdivTop").show();
	          showFloatTop=false;
	       }else{
	          $("#floatdivTop").hide();
	          showFloatTop=true;
	       }
       };
       	var clsTagName = "className";
	    if (window.ActiveXObject){
	       clsTagName = "className";
	    }else if (document.getBoxObjectFor){
	       clsTagName = "class";
	    }
		function selDatePanel(panelId) {
			$('#'+panelId).attr(clsTagName,'tablecolour11');
		}
		function unselDatePanel(panelId) {
			$('#'+panelId).attr(clsTagName,'tablecolour10');
		}
</script>
		<style type="text/css">
#tdwithtooltip {
	cursor: pointer;
}

#simpleTooltip {
	padding: 7px;
	border: 1px solid #A6A7AB;
	background: #F2F3F5;
}

#topdiv {
	position: absolute;
	z-index: 2;
	width: < s :     property value =     "teachers.size()*101+203"/ >    
		px;
	height: 39px;
	background-color: #fff;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border: 0px solid #42CBDC;
}

#leftdiv {
	position: absolute;
	top: 39px;
	z-index: 1;
	margin: 0px;
	width: 161px;
	background-color: #fff;
	padding: 0px 0px 0px 0px;
	border: 0px solid #42CBDC;
}

#floatdiv {
	position: fixed;
	left: 700px;
	top: 100px;
	z-index: 3;
	width: 500 px;
	background-color: #FFFFFF;
	margin: 2px 2px 2px 2px;
	padding: 2px 2px 2px 2px;
	border: 6px solid #42CBDC;
	z-index: 3;
}

#bookingtable {
	position: relative;
	top: 34px;
	z-index: 0;
}
</style>
		<title><s:text name="system.title" />
		</title>
	</head>
	<body style="font-size:11px">
		<div id="floatdiv">
			<table>
				<tr>
					<td>
						<div id="floatdivTop" style="display: none">
							<table>
								<tr>
									<td>
										<table>
											<tr>
												<td>
													<s:property value="selLeads.name" />
													[
													<s:property value="selLeads.eliteCard" />
													][
													<s:property value="selLeads.course.name" />
													][
													<s:property value="selLeads.currentlevel" />
													]
												</td>
											</tr>
											<tr>
												<td>
													V [
													<s:if test="selLeads.isVIP">
								 T
								 </s:if>
													<s:else>
								 F
								 </s:else>
													] P [
													<s:if test="selLeads.needPunish">
								 T
								 </s:if>
													<s:else>
								 F
								 </s:else>
													] C/W [
													<s:property value="selLeads.cancelTimesInWeek" />
													]
													<s:if test="selLeads.needJudgeNetLevel">
	  							NET
									[<s:property value="selLeads.netLevel" />-
									<s:property value="selLeads.netLevelUnit" />]
									[<s:date name="selLeads.changeNetLevelTime" format="yy-MM-dd" />]
		    					</s:if>
												</td>
											</tr>
											<tr>
												<td>
													<input id="entityid" type="hidden" value="" />
													<input id="divid" type="hidden" value="" />
													<input id="seldate" size="6" type="text"
														readonly="readonly"
														style="border-color: black; border-bottom: 2; border-left: 0; border-right: 0; border-top: 0" />
													<input id="seltime" size="8" type="text"
														readonly="readonly"
														style="border-color: black; border-bottom: 2; border-left: 0; border-right: 0; border-top: 0" />
													<input id="selteacher" size="6" type="text"
														readonly="readonly"
														style="border-color: black; border-bottom: 2; border-left: 0; border-right: 0; border-top: 0" />
												</td>
											</tr>
											<tr>
												<td>
													<input id="selfocus" size="20" type="text"
														readonly="readonly"
														style="border-color: black; border-bottom: 2; border-left: 0; border-right: 0; border-top: 0" />
												</td>
											</tr>
										</table>
									</td>
									<td>
										<table>
											<tr>
												<td width="15px"
													bgcolor="<s:property value="@com.ef.constant.SystemContant@BOOKING_SELECTED_COLOR"/>">
													SELECTED
												</td>
												<td width="15px"
													bgcolor="<s:property value="@com.ef.constant.SystemContant@BOOKING_WAIT_COLOR"/>">
													WAIT
												</td>
												<td width="15px"
													bgcolor="<s:property value="@com.ef.constant.SystemContant@BOOKING_CHECKIN_COLOR"/>">
													CHECKIN
												</td>
											</tr>
											<tr>
												<td width="15px"
													bgcolor="<s:property value="@com.ef.constant.SystemContant@BOOKING_ABSENCE_COLOR"/>">
													ABSENCE
												</td>
												<td width="15px"
													bgcolor="<s:property value="@com.ef.constant.SystemContant@BOOKING_PUNISH_COLOR"/>">
													CANCEL
												</td>
												<td width="15px"
													bgcolor="<s:property value="@com.ef.constant.SystemContant@BOOKING_FULL_COLOR"/>">
													FULL
												</td>
											</tr>
											<tr>
												<td width="15px"
													bgcolor="<s:property value="@com.ef.constant.SystemContant@BOOKING_F2FFREE_COLOR"/>">
													F2F FREE
												</td>
												<td width="15px"
													bgcolor="<s:property value="@com.ef.constant.SystemContant@BOOKING_F2FMATCH_COLOR"/>">
													F2F M
												</td>
												<td width="15px"
													bgcolor="<s:property value="@com.ef.constant.SystemContant@BOOKING_F2FUNMATCH_COLOR"/>">
													F2F UNM
												</td>
											</tr>
											<tr>
												<td width="15px"
													bgcolor="<s:property value="@com.ef.constant.SystemContant@BOOKING_F2FCHINESE_COLOR"/>">
													F2F CHN
												</td>
												<td width="15px"
													bgcolor="<s:property value="@com.ef.constant.SystemContant@BOOKING_F2FALL_COLOR"/>">
													F2F ALL
												</td>
												<td width="15px"
													bgcolor="<s:property value="@com.ef.constant.SystemContant@BOOKING_F2FFULL_COLOR"/>">
													F2F FULL
												</td>
											</tr>
										</table>
									</td>
								</tr>
								<tr>
									<td colspan="2">
										<input readonly="readonly" id="info" size="60"/ >
									</td>
								</tr>
							</table>
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<table>
							<tr>
								<td rowspan='3'>
									<input name="button4" type="button"
										onclick="javascript:doBooking('NORMAL','0');" value="BOOKING"
										style="width: 80px; height: 80px" />
								</td>
								<td rowspan='3'>
									<input name="button3" type="button"
										onClick="javascript:doBooking('CANCEL','0');" value="CANCEL"
										style="width: 80px; height: 80px" />
								</td>
								<td>
									<input name="button2" type="button"
										onclick="javascript:doBooking('PSA','0');" value="PSA"
										style="width: 100px;" />
								</td>
								<td>
									Order:
									<input type="text" id="bookingOrder" name="bookingOrder"
										size="4" />
								</td>
							</tr>
							<tr>
								<td>
									<input name="button" type="button"
										onclick="javascript:doBooking('FREEF2F','0');" value="FreeF2F"
										style="width: 100px" />
								</td>
								<td rowspan='2'>
									<input type="button" value="C"
										style="width: 50px; height: 50px" onClick="window.close();" />
									<input name="button" type="button" onclick="doShowTeacher()"
											style="width: 40px; height: 50px" value="T" />
								     <input type="button" value="S"
										style="width: 40px; height: 50px" onClick="doShowFloatTop();" />
								</td>
							</tr>
							<tr>
								<td>
									<input name="button2" type="button"
										onclick="javascript:doBooking('VIP','0');" value="VIP"
										style="width: 100px;" />
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</div>
		<div id="topdiv">
			<s:form action="ClassBooking/beforeBooking" method="post">
				<table id="teacherTable" width="100%" style="table-layout: fixed;"
					cellpadding="0" cellspacing="1" class="box2">
					<s:hidden id="leadsid" name="selLeadsId" />
					<tr height="36px">
						<td width="200" class="tablecolour9">
							<s:select list="{2008,2009,2010,2011}" id='selYear' name="year">
							</s:select>
							<s:select
								list="{1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52}"
								id='selWeek' name="week">
							</s:select>
							<input type="submit" value="R" />
							<input type="button" value="F" onClick="doShowFloat()" />
						</td>
						<s:iterator value="teachers">
							<td width="100" class="tablecolour9">
								<FONT title='teacher' color="#A7CDF7"><s:property
										value="name" /> </FONT>
							</td>
						</s:iterator>
					</tr>
				</table>
			</s:form>
		</div>
		<div id="leftdiv">
			<table width="160" border="0" cellpadding="0" cellspacing="1"
				class="box2">
				<s:iterator value="days" status="st">
					<tr>
						<s:if test="#st.index%10==0">
							<td rowspan="10" bgcolor="#FFFFFF" width="80"
								style="word-wrap: break-word; word-break: break-all; break-all; border-bottom: 2px solid #CAE1F9"
								class="tablecolour10">
								<s:set name="bday" />
								<s:date name="bday" format="E" />
								<br />
								<s:date name="bday" format="yyyy-MM-dd" />
							</td>
						</s:if>
						<td bgcolor="#FFFFFF" width="80"
							style="<s:if test="#st.index%10==9">border-bottom:2px solid #CAE1F9</s:if>"
							class="tablecolour10" id="datePanel<s:property value="#st.index"/>" >
							<s:property value="getTimeline(#bday).get(#st.index%10)" />
						</td>
					</tr>
				</s:iterator>
			</table>
		</div>
		<%
			int i = 1;
		%>
		<table id="bookingtable" bordercolor="black" width="100%" border="0"
			cellpadding="0" cellspacing="1" class="box2"
			style="table-layout: fixed;">
			<s:iterator value="days" status="st">
				<tr>
					<s:if test="#st.index==0">
						<td width="200" class="tablecolour12"
							rowspan="<s:property value="days.size"/>"></td>
					</s:if>
					<s:if test="#st.index%10==0">
						<s:set name="bday" />
					</s:if>
					<s:set name="btime" value="getTimeline(#bday).get(#st.index%10)" />
					<s:iterator value="teachers">
						<s:set name="clId" value="getClassEntityId(#bday,#btime,id)" />
						<s:if test="%{#clId!='-1'}">
							<td align="center" width="100" id="<%=i%>"
								bgcolor="<s:property value="getClassEntityColor(#bday,#btime,id)"/>"
								style="<s:if test="#st.index%10==9">border-bottom:2px solid #CAE1F9</s:if>"
								class="tdwithtooltip"
								title="<s:property value="getClassEntityToolTip(#bday,#btime,id)"/>"
								onclick="javescript:doSelect(<%=i++%>,<s:property value="%{#clId}"/>,'<s:property value="%{#bday}"/>','<s:property value="%{#btime}"/>','<s:property value="%{name}"/>');"
								onmouseover="selDatePanel('datePanel<s:property value="#st.index"/>');" onmouseout="unselDatePanel('datePanel<s:property value="#st.index"/>');" 
								class="tablecolour12">
								<s:property value="getClassEntityInfo(#bday,#btime,id)" />
							</td>
						</s:if>
						<s:else>
							<td align="center" width="100"
								style="<s:if test="#st.index%10==9">border-bottom:2px solid #CAE1F9</s:if>"
								id="<%=i++%>" class="tablecolour12">&nbsp;</td>
						</s:else>
					</s:iterator>
				</tr>
			</s:iterator>
		</table>
	</body>
</html>